import React from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';

type FlatlistType = {
    id: string;
    name: string;
    description?: string;
}

type ListPageProps = {
    list: FlatlistType[];
    navigation?: any;
    title: string;
}

const ListPage: React.FC<ListPageProps> = ({ title, list, navigation }) => {

    const handleDemoPress = ({ item }: any) => {
        const { component, children, ...rest } = item;
        navigation.navigate(item.id, { 
            ...rest,
         });

    };

    const renderItem = ({ item }: any) => {
        return (
            <TouchableOpacity style={styles.demoItem} onPress={() => handleDemoPress({ item })}>
                <Text style={styles.demoTitle}>{item.name}</Text>
                <Text style={styles.demoDescription}>{item.description}</Text>
            </TouchableOpacity>
        );
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>{title}</Text>
            <FlatList
                data={list}
                renderItem={({ item }) => renderItem({ item })}
                keyExtractor={(item) => item.id}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    demoItem: {
        marginBottom: 20,
        padding: 10,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
    },
    demoTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    demoDescription: {
        fontSize: 16,
    },
});

export default ListPage;